<template>
  <view>
    <u-checkbox-group ref="checkboxGroup" v-model="checkboxValue1" placement="column" @change="checkboxChange">

      <view class="list" @click="checkbox(item.id)" v-for="item in words" :key="item.id">
        <!-- name用id进行绑定 -->
        <u-checkbox iconSize="40rpx" v-if="operate" customStyle="position: absolute;margin-left: 40rpx;" size="50rpx"
          :name="item.id" class="checkbox">
        </u-checkbox>
        <view class="word" :style="operate?'margin-left: 85rpx ;':''">
          <!-- 英文单词 -->
          <text>{{item.word}}</text>
          <br>
          <!-- 单词释义 -->
          <text style="color: #646566;font-size: 35rpx;">{{item.translation}}</text>
        </view>
        <span class="iconfont" @click.stop="audio(item.word)">&#xe6fd;</span>
      </view>
    </u-checkbox-group>

    <van-dialog id="van-dialog" />
  </view>

</template>

<script>
  import Dialog from '@/wxcomponents/vant/dialog/dialog';
  export default {
    name: "WordList",
    props: {
      // 单词数据
      words: Array,

      // 长按显示
      operate: Boolean
    },
    data() {
      return {
        // 选中的数据
        checkboxValue1: [],
        that: null, //音频防抖

      };
    },
    watch: {
      checkboxValue1(item) {
        // 改变操作全选和不全选状态的字 
        if (item.length === this.words.length) {
          this.$emit('allChooseBoolean', true, item.length)
        } else {
          this.$emit('allChooseBoolean', false, item.length)
        }
      },

    },
    methods: {
      // 父组件点击取消时,清空选中
      Cancel() {
        this.checkboxValue1 = []
      },
      // 选中
      checkboxChange(n) {
        console.log('change666', n);

      },

      // 扩中选中范围
      checkbox(id) {
        if (!this.operate) {
          // 判断是否为长按后状态,如果不是长按状态，则跳转单词详情页面
          uni.navigateTo({
            url: '/subpkg/wordDetails/wordDetails?dept_id=' + this.words[0].dept_id + '&id=' +
              id //把单词本id和当前单词id传给单词详情页面
          })
        } else if (this.checkboxValue1.indexOf(id) == -1 && this.operate) {
          // 在长按后的事件下，如果checkboxValue1数组有该id就删除,反之则添加
          this.checkboxValue1.push(id)
        } else {
          this.checkboxValue1.splice(this.checkboxValue1.indexOf(id), 1)
        }
      },
      // 全选
      checkAll() {
        let arr = []
        this.words.map(item => {
          arr.push(item.id)
        })
        if (this.checkboxValue1.length === this.words.length) {
          this.$nextTick(() => {
            // 全不选
            this.checkboxValue1 = []
          })
        } else {
          // 全选
          this.$nextTick(() => {
            this.checkboxValue1 = arr
            console.log(777)
          })
        }
      },
      // 父组件取消状态栏事件
      check() {
        this.checkboxValue1 = []
      },
      // 父组件删除事件
      Delete() {
        if (this.checkboxValue1.length) {
          Dialog.confirm({
            context: this,
            title: '确定要删除吗？',
          }).then(() => {

            uni.$myRequest('/home/word/deleteWord', 'GET', this.checkboxValue1).then(res => {
              console.log(res)
              if (res.data.status === 201) return uni.showToast({
                title: '单词删除失败',
                icon: "error"
              })
              // this.getBooks()
              this.$parent.getBooks()
            })
          }).catch(() => {});
        }
      },
      // 父组件分享事件
      shareWords() {

        let data = {
          bookArray: JSON.stringify(this.checkboxValue1)
        }
        console.log(this.checkboxValue1,'data')
        uni.$myRequest('/home/word/shareWords', 'POST', data).then(res => {
          Dialog.alert({
            context: this,
            title: '分享单词',
            message: `复制这段内容粘贴到源码单词导入功能[&${res.data.data}&]即可获取`,
          }).then(() => {})
          console.log(`复制这段内容粘贴到源码单词导入功能[&${res.data.data}&]即可获取`)
        })
      },
      // 单词发音事件
      audio(word) {
        // main.js文件中把音频实例保存为全局变量
        this.$audio.src = 'http://dict.youdao.com/dictvoice?audio=' + word
        this.$audio.play()
      }
    }
  }
</script>

<style lang="scss">
  .list {
    position: relative;
    height: 130rpx;
    background-color: white;
    border-bottom: 1px solid #d5d9d5;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .word {
      height: 100%;
      padding: 0 40rpx;
      line-height: 65rpx;
      font-size: 40rpx;
    }

    span {
      height: 100%;
      padding: 0 40rpx;
      font-size: 50rpx;
      line-height: 130rpx;
    }
  }

  .checkbox {
    border: 1px solid;
  }
</style>
